"use client"

import { useState, useEffect } from "react"
import { View, Text, StyleSheet, TouchableOpacity, Platform, Alert, Image } from "react-native"
import { SafeAreaView } from "react-native-safe-area-context"
import { LinearGradient } from "expo-linear-gradient"
import { ArrowLeft, Settings, BookOpen, ArrowDownUp, X, CheckCircle } from "lucide-react-native"
import { useRouter, useLocalSearchParams } from "expo-router"
import { theme } from "../constants/theme"
import { SortMenu } from "../components/learning/SortMenu"
import { SettingsMenu } from "../components/learning/SettingsMenu"
import { PracticeModal } from "../components/learning/PracticeModal"
import { LearningProgressBar } from "../components/plan/LearningProgressBar"
import AsyncStorage from "@react-native-async-storage/async-storage"
import { GestureHandlerRootView } from "react-native-gesture-handler"
import { NewLearningList } from "../components/plan/NewLearningList"

// 模拟的词汇数据 - 使用新的状态
const VOCABULARY_DATA = [
    {
        id: "1",
        word: "formulation",
        phonetic: "/fɔːmjuˈleɪʃ(ə)n/",
        type: "n",
        meaning: "公式化；阐述方式；规划；配方",
        syllables: ["for", "mu", "la", "tion"],
        status: "needWrite", // 需会写
        favorite: false,
        previousStatus: null, // 添加之前的状态
    },
    {
        id: "2",
        word: "favoritism",
        phonetic: "/ˈfeɪvərɪtɪzəm/",
        type: "n",
        meaning: "偏爱；偏袒；徇私",
        syllables: ["fa", "vor", "i", "tism"],
        status: "needRecognize", // 需会认
        favorite: true,
        previousStatus: null,
    },
    {
        id: "3",
        word: "turbine",
        phonetic: "/ˈtɜːbaɪn/",
        type: "n",
        meaning: "涡轮",
        syllables: ["tur", "bine"],
        status: "needWrite", // 需会写
        favorite: false,
        previousStatus: null,
    },
    {
        id: "4",
        word: "eject",
        phonetic: "/ɪˈdʒekt/",
        type: "v",
        meaning: "喷射；喷出；驱逐；逐出",
        syllables: ["e", "ject"],
        status: "mastered", // 标熟
        favorite: false,
        previousStatus: "needWrite",
    },
    {
        id: "5",
        word: "ethics",
        phonetic: "/ˈeθɪks/",
        type: "n",
        meaning: "道德规范；伦理",
        syllables: ["eth", "ics"],
        status: "needRecognize", // 需会认
        favorite: false,
        previousStatus: null,
    },
    {
        id: "6",
        word: "exemplify",
        phonetic: "/ɪɡˈzemplɪfaɪ/",
        type: "v",
        meaning: "举例说明；例证；例示",
        syllables: ["ex", "em", "pli", "fy"],
        status: "needWrite", // 需会写
        favorite: true,
        previousStatus: null,
    },
    {
        id: "7",
        word: "rectify",
        phonetic: "/ˈrektɪfaɪ/",
        type: "v",
        meaning: "纠正；矫正",
        syllables: ["rec", "ti", "fy"],
        status: "mastered", // 标熟
        favorite: false,
        previousStatus: "needRecognize",
    },
    {
        id: "8",
        word: "retention",
        phonetic: "/rɪˈtenʃn/",
        type: "n",
        meaning: "保留；保持；保持物；记忆力",
        syllables: ["re", "ten", "tion"],
        status: "needRecognize", // 需会认
        favorite: true,
        previousStatus: null,
    },
]

// 添加复习单词数据 - 可以为空数组来测试空状态
const REVIEW_VOCABULARY_DATA = [
    {
        id: "r1",
        word: "abandon",
        phonetic: "/əˈbændən/",
        type: "v",
        meaning: "抛弃；放弃；中止",
        syllables: ["a", "ban", "don"],
        status: "needRecognize",
        favorite: false,
        previousStatus: null,
    },
    {
        id: "r2",
        word: "ability",
        phonetic: "/əˈbɪləti/",
        type: "n",
        meaning: "能力；才能；技能",
        syllables: ["a", "bil", "i", "ty"],
        status: "needWrite",
        favorite: true,
        previousStatus: null,
    },
    {
        id: "r3",
        word: "abroad",
        phonetic: "/əˈbrɔːd/",
        type: "adv",
        meaning: "在国外；海外；出国",
        syllables: ["a", "broad"],
        status: "needRecognize",
        favorite: false,
        previousStatus: null,
    },
]

// 扩展VocabularyItem接口以包含previousStatus
interface VocabularyItem {
    id: string
    word: string
    phonetic: string
    meaning: string
    type: string
    syllables: string[]
    status: "needWrite" | "needRecognize" | "mastered" | "new" | "learning"
    favorite: boolean
    previousStatus: "needWrite" | "needRecognize" | "new" | "learning" | null
}

const FILTERS = [
    { id: "all", label: "全部" },
    { id: "needWrite", label: "需会写" },
    { id: "needRecognize", label: "需会认" },
    { id: "mastered", label: "已标熟" },
]

const TABS = [
    { id: "none", label: "无遮盖" },
    { id: "translation", label: "遮盖翻译" },
    { id: "words", label: "遮盖单词" },
]

const SORT_OPTIONS = [
    { id: "normal", label: "正序" },
    { id: "random", label: "乱序" },
    { id: "alphaAsc", label: "字母正序" },
    { id: "alphaDesc", label: "字母倒序" },
]

export default function NewLearningScreen() {
    const router = useRouter()
    const params = useLocalSearchParams()
    const [activeFilter, setActiveFilter] = useState("all")
    const [activeTab, setActiveTab] = useState("none")
    const [activeSort, setActiveSort] = useState("normal")
    const [sortMenuVisible, setSortMenuVisible] = useState(false)
    const [settingsMenuVisible, setSettingsMenuVisible] = useState(false)
    const [selectedWordId, setSelectedWordId] = useState<string | null>(null)
    const [vocabularyData, setVocabularyData] = useState<VocabularyItem[]>([])
    const [practiceModalVisible, setPracticeModalVisible] = useState(false)
    const [selectedBook, setSelectedBook] = useState<any>(null)
    const [markMode, setMarkMode] = useState(false)
    const [markedWords, setMarkedWords] = useState<string[]>([])
    const [isFromBookPage, setIsFromBookPage] = useState(false)
    const [isSwipeActive, setIsSwipeActive] = useState(false)
    const [isReviewMode, setIsReviewMode] = useState(false)

    // 学习进度
    const [learnedCount, setLearnedCount] = useState(0)
    const [totalCount, setTotalCount] = useState(0)

    // 设置状态
    const [settings, setSettings] = useState({
        split: false,
        fontSize: "medium" as "small" | "medium" | "large",
    })

    // 从本地存储加载设置
    useEffect(() => {
        const loadSettings = async () => {
            try {
                const storedFontSize = await AsyncStorage.getItem("learningFontSize")
                const storedSplit = await AsyncStorage.getItem("learningSplit")

                if (storedFontSize) {
                    setSettings((prev) => ({
                        ...prev,
                        fontSize: storedFontSize as "small" | "medium" | "large",
                    }))
                }

                if (storedSplit) {
                    setSettings((prev) => ({
                        ...prev,
                        split: storedSplit === "true",
                    }))
                }
            } catch (error) {
                console.error("加载设置失败:", error)
            }
        }

        loadSettings()
    }, [])

    // 处理路由参数和加载数据
    useEffect(() => {
        // 通过路由参数判断是否从书籍页面跳转
        const source = params.source as string
        const mode = params.mode as string

        if (source === "book") {
            setIsFromBookPage(true)
            console.log("从书籍页面跳转过来")
        }

        // 检查是否是复习模式
        if (mode === "review") {
            console.log("复习模式")
            setIsReviewMode(true)
            // 加载复习单词数据
            setVocabularyData(REVIEW_VOCABULARY_DATA)
        } else {
            setIsReviewMode(false)
            // 加载普通学习数据
            setVocabularyData(VOCABULARY_DATA)
        }
    }, [params])

    // 计算学习进度 - 只在数据初始加载时执行一次
    useEffect(() => {
        if (vocabularyData.length > 0) {
            const masteredWords = vocabularyData.filter((word) => word.status === "mastered").length
            setLearnedCount(masteredWords)
            setTotalCount(vocabularyData.length)
        }
    }, [vocabularyData])

    // 计算学习进度
    const calculateProgress = () => {
        const masteredWords = vocabularyData.filter((word) => word.status === "mastered").length

        // 只有当值真正变化时才更新状态
        if (masteredWords !== learnedCount || vocabularyData.length !== totalCount) {
            setLearnedCount(masteredWords)
            setTotalCount(vocabularyData.length)
        }
    }

    const handleBack = () => {
        router.back()
    }

    const getSortLabel = () => {
        const option = SORT_OPTIONS.find((opt) => opt.id === activeSort)
        return option ? option.label : "排序"
    }

    // 更新设置并保存到本地存储
    const handleSettingsChange = async (newSettings: { split?: boolean; fontSize?: "small" | "medium" | "large" }) => {
        const updatedSettings = { ...settings, ...newSettings }
        setSettings(updatedSettings)

        try {
            // 保存到本地存储
            if (newSettings.fontSize) {
                await AsyncStorage.setItem("learningFontSize", newSettings.fontSize)
            }

            if (newSettings.split !== undefined) {
                await AsyncStorage.setItem("learningSplit", newSettings.split.toString())
            }
        } catch (error) {
            console.error("保存设置失败:", error)
        }
    }

    // 处理单词点击
    const handleWordPress = (wordId: string) => {
        // 如果正在滑动，不触发点击事件
        if (isSwipeActive) {
            return
        }

        if (markMode) {
            // 在标熟模式下，点击单词会选中/取消选中它
            setMarkedWords((prev) => {
                if (prev.includes(wordId)) {
                    return prev.filter((id) => id !== wordId)
                } else {
                    return [...prev, wordId]
                }
            })
        } else {
            setSelectedWordId(wordId)
        }
    }

    // 更新单词状态
    const updateWordStatus = (
        wordId: string,
        status: "needWrite" | "needRecognize" | "mastered" | "new" | "learning",
    ) => {
        setVocabularyData((prevData) => {
            const newData = prevData.map((item) => {
                if (item.id === wordId) {
                    // 如果是标记为mastered，保存之前的状态
                    if (status === "mastered" && item.status !== "mastered") {
                        return { ...item, status, previousStatus: item.status }
                    }
                    // 如果是从mastered变为其他状态，不需要保存previousStatus
                    if (item.status === "mastered" && status !== "mastered") {
                        return { ...item, status, previousStatus: null }
                    }
                    return { ...item, status }
                }
                return item
            })

            // 使用setTimeout确保状态更新后再计算进度
            setTimeout(() => calculateProgress(), 0)

            return newData
        })
    }

    // 切换收藏状态
    const toggleFavorite = (wordId: string) => {
        setVocabularyData((prevData) =>
            prevData.map((item) => (item.id === wordId ? { ...item, favorite: !item.favorite } : item)),
        )
    }

    // 过滤单词列表
    const filteredVocabulary = vocabularyData.filter((item) => {
        if (activeFilter === "all") return true
        return item.status === activeFilter
    })

    // 进入标熟模式
    const enterMarkMode = () => {
        setMarkMode(true)
        setMarkedWords([])
    }

    // 退出标熟模式
    const exitMarkMode = () => {
        setMarkMode(false)
        setMarkedWords([])
    }

    // 标熟选中的单词
    const markSelectedWords = () => {
        if (markedWords.length === 0) {
            Alert.alert("提示", "请先选择要标熟的单词")
            return
        }

        Alert.alert("标熟单词", `确定要将选中的 ${markedWords.length} 个单词标记为已熟悉吗？`, [
            {
                text: "取消",
                style: "cancel",
            },
            {
                text: "确定",
                onPress: () => {
                    setVocabularyData((prev) =>
                        prev.map((word) =>
                            markedWords.includes(word.id) ? { ...word, status: "mastered", previousStatus: word.status } : word,
                        ),
                    )

                    // 使用setTimeout确保状态更新后再计算进度
                    setTimeout(() => calculateProgress(), 0)

                    Alert.alert("标记成功", `已将 ${markedWords.length} 个单词标记为熟悉`)
                    exitMarkMode()
                },
            },
        ])
    }

    return (
        <GestureHandlerRootView style={{ flex: 1 }}>
            <SafeAreaView style={styles.container} edges={["top"]}>
                <LinearGradient
                    colors={theme.colors.neutral.backgroundGradient}
                    start={{ x: 0, y: 0 }}
                    end={{ x: 0, y: 1 }}
                    style={styles.gradientBackground}
                >
                    {/* 头部 */}
                    <View style={styles.header}>
                        <TouchableOpacity onPress={handleBack} style={styles.backButton}>
                            <ArrowLeft size={24} color={theme.colors.neutral.black} />
                        </TouchableOpacity>

                        {/* 学习模式选项卡 - 移回头部 */}
                        <View style={styles.headerTabs}>
                            {TABS.map((tab) => (
                                <TouchableOpacity
                                    key={tab.id}
                                    style={[styles.headerTab, activeTab === tab.id && styles.headerTabActive]}
                                    onPress={() => setActiveTab(tab.id)}
                                >
                                    <Text style={[styles.headerTabText, activeTab === tab.id && styles.headerTabTextActive]}>
                                        {tab.label}
                                    </Text>
                                </TouchableOpacity>
                            ))}
                        </View>

                        <TouchableOpacity style={styles.settingsButton} onPress={() => setSettingsMenuVisible(true)}>
                            <Settings size={24} color={theme.colors.neutral.black} />
                        </TouchableOpacity>
                    </View>

                    {/* 标熟模式提示条 */}
                    {markMode && (
                        <View style={styles.markModeBanner}>
                            <Text style={styles.markModeText}>已选择 {markedWords.length} 个单词</Text>
                            <View style={styles.markModeActions}>
                                <TouchableOpacity
                                    style={styles.markModeButton}
                                    onPress={markSelectedWords}
                                    disabled={markedWords.length === 0}
                                >
                                    <Text
                                        style={[styles.markModeButtonText, markedWords.length === 0 && styles.markModeButtonTextDisabled]}
                                    >
                                        标熟
                                    </Text>
                                </TouchableOpacity>
                                <TouchableOpacity style={styles.markModeCloseButton} onPress={exitMarkMode}>
                                    <X size={20} color={theme.colors.neutral.white} />
                                </TouchableOpacity>
                            </View>
                        </View>
                    )}

                    {/* 使用封装的学习进度条组件 */}
                    <LearningProgressBar learnedCount={learnedCount} totalCount={totalCount} />

                    {/* 筛选器和排序 */}
                    <View style={styles.filtersContainer}>
                        <View style={styles.filtersRow}>
                            <View style={styles.filterButtons}>
                                {FILTERS.map((filter) => (
                                    <TouchableOpacity
                                        key={filter.id}
                                        style={[styles.filterButton, activeFilter === filter.id && styles.filterButtonActive]}
                                        onPress={() => setActiveFilter(filter.id)}
                                    >
                                        <Text
                                            style={[styles.filterButtonText, activeFilter === filter.id && styles.filterButtonTextActive]}
                                        >
                                            {filter.label}
                                        </Text>
                                    </TouchableOpacity>
                                ))}
                            </View>

                            <TouchableOpacity style={styles.sortButton} onPress={() => setSortMenuVisible(true)}>
                                <ArrowDownUp size={16} color={theme.colors.primary.default} style={{ marginRight: 4 }} />
                                <Text style={styles.sortButtonText}>{getSortLabel()}</Text>
                            </TouchableOpacity>
                        </View>
                    </View>

                    {/* 词汇列表组件 */}
                    {filteredVocabulary.length > 0 ? (
                        <NewLearningList
                            vocabularyData={filteredVocabulary}
                            activeTab={activeTab}
                            settings={settings}
                            selectedWordId={selectedWordId}
                            onWordPress={handleWordPress}
                            onUpdateStatus={updateWordStatus}
                            onToggleFavorite={toggleFavorite}
                            deleteMode={markMode}
                            selectedWords={markedWords}
                            showFavoriteButton={!isFromBookPage}
                            onSwipeStateChange={setIsSwipeActive}
                            isReviewMode={isReviewMode}
                        />
                    ) : (
                        <View style={styles.emptyContainer}>
                            <Image
                                source={{ uri: "https://cdn-icons-png.flaticon.com/512/4076/4076478.png" }}
                                style={styles.emptyImage}
                            />
                            <Text style={styles.emptyTitle}>{isReviewMode ? "今日没有需要复习的单词" : "没有需要学习的单词"}</Text>
                            <Text style={styles.emptyText}>
                                {isReviewMode ? "太棒了！你已经完成了今天的复习任务" : "请从词库中添加单词或创建学习计划"}
                            </Text>
                        </View>
                    )}

                    {/* 底部按钮 */}
                    <View style={styles.bottomButtons}>
                        <TouchableOpacity style={styles.practiceButton} onPress={() => setPracticeModalVisible(true)}>
                            <BookOpen size={20} color={theme.colors.primary.default} />
                            <Text style={styles.practiceButtonText}>专项练习</Text>
                        </TouchableOpacity>

                        {filteredVocabulary.length > 0 ? (
                            <TouchableOpacity
                                style={styles.startLearningButton}
                                onPress={() => router.push("/integrated-learning-screen")}
                            >
                                <LinearGradient
                                    colors={["#6B9BFF", "#5B8EF4"]}
                                    start={{ x: 0, y: 0 }}
                                    end={{ x: 1, y: 0 }}
                                    style={styles.gradientButton}
                                >
                                    <Text style={styles.startLearningButtonText}>{isReviewMode ? "开始复习" : "开始学习"}</Text>
                                </LinearGradient>
                            </TouchableOpacity>
                        ) : (
                            <TouchableOpacity style={styles.startLearningButton} onPress={handleBack}>
                                <LinearGradient
                                    colors={["#6B9BFF", "#5B8EF4"]}
                                    start={{ x: 0, y: 0 }}
                                    end={{ x: 1, y: 0 }}
                                    style={styles.gradientButton}
                                >
                                    <Text style={styles.startLearningButtonText}>返回</Text>
                                </LinearGradient>
                            </TouchableOpacity>
                        )}
                    </View>
                </LinearGradient>
                {/* 排序菜单组件 */}
                <SortMenu
                    visible={sortMenuVisible}
                    activeSort={activeSort}
                    options={SORT_OPTIONS}
                    onSelect={setActiveSort}
                    onClose={() => setSortMenuVisible(false)}
                    style={{ zIndex: 1001 }}
                />

                {/* 设置菜单组件 */}
                <SettingsMenu
                    visible={settingsMenuVisible}
                    settings={settings}
                    onSettingsChange={handleSettingsChange}
                    onClose={() => setSettingsMenuVisible(false)}
                    style={{ zIndex: 1001 }}
                />

                {/* 练习模式组件 */}
                <PracticeModal visible={practiceModalVisible} onClose={() => setPracticeModalVisible(false)} />

                {/* 标熟按钮 - 在所有模式下都显示 */}
                <TouchableOpacity
                    style={styles.markButton}
                    onPress={markMode ? exitMarkMode : enterMarkMode}
                    activeOpacity={0.8}
                >
                    <LinearGradient colors={theme.colors.primary.gradient} style={styles.markButtonGradient}>
                        <CheckCircle size={24} color={theme.colors.neutral.white} />
                    </LinearGradient>
                </TouchableOpacity>
            </SafeAreaView>
        </GestureHandlerRootView>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: theme.colors.neutral.background,
    },
    gradientBackground: {
        flex: 1,
    },
    header: {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
        paddingHorizontal: theme.spacing.lg,
        paddingVertical: theme.spacing.md,
    },
    backButton: {
        width: 40,
        height: 40,
        borderRadius: 20,
        alignItems: "center",
        justifyContent: "center",
        backgroundColor: "rgba(255, 255, 255, 0.5)",
    },
    headerTabs: {
        flexDirection: "row",
        backgroundColor: "rgba(91, 142, 244, 0.1)",
        borderRadius: theme.borderRadius.large,
        padding: theme.spacing.xs,
    },
    headerTab: {
        paddingHorizontal: theme.spacing.lg,
        paddingVertical: theme.spacing.sm,
        borderRadius: theme.borderRadius.medium,
    },
    headerTabActive: {
        backgroundColor: theme.colors.neutral.white,
    },
    headerTabText: {
        fontSize: theme.fontSize.sm,
        color: theme.colors.neutral.gray,
    },
    headerTabTextActive: {
        color: theme.colors.primary.default,
        fontWeight: theme.fontWeight.semiBold,
    },
    settingsButton: {
        width: 40,
        height: 40,
        borderRadius: 20,
        alignItems: "center",
        justifyContent: "center",
        backgroundColor: "rgba(255, 255, 255, 0.5)",
    },
    filtersContainer: {
        paddingHorizontal: theme.spacing.lg,
        paddingVertical: theme.spacing.md,
    },
    filtersRow: {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
        gap: theme.spacing.md,
    },
    filterButtons: {
        flexDirection: "row",
        backgroundColor: "rgba(91, 142, 244, 0.1)",
        borderRadius: theme.borderRadius.large,
        padding: theme.spacing.xs,
        flex: 1,
    },
    filterButton: {
        flex: 1,
        paddingVertical: theme.spacing.sm,
        alignItems: "center",
        borderRadius: theme.borderRadius.medium,
    },
    filterButtonActive: {
        backgroundColor: theme.colors.neutral.white,
    },
    filterButtonText: {
        fontSize: theme.fontSize.sm,
        color: theme.colors.neutral.gray,
    },
    filterButtonTextActive: {
        color: theme.colors.primary.default,
        fontWeight: theme.fontWeight.semiBold,
    },
    sortButton: {
        backgroundColor: "rgba(91, 142, 244, 0.1)",
        paddingHorizontal: theme.spacing.md,
        paddingVertical: theme.spacing.sm,
        borderRadius: theme.borderRadius.medium,
        flexDirection: "row",
        alignItems: "center",
    },
    sortButtonText: {
        fontSize: theme.fontSize.sm,
        color: theme.colors.primary.default,
        fontWeight: theme.fontWeight.medium,
    },
    bottomButtons: {
        flexDirection: "row",
        paddingHorizontal: theme.spacing.lg,
        paddingTop: theme.spacing.md,
        paddingBottom: Platform.OS === "ios" ? 34 : theme.spacing.lg,
        gap: theme.spacing.md,
        backgroundColor: theme.colors.neutral.white,
        borderTopWidth: 1,
        borderTopColor: theme.colors.neutral.lightGray,
    },
    practiceButton: {
        flex: 1,
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        backgroundColor: `${theme.colors.primary.default}15`,
        paddingVertical: theme.spacing.md,
        borderRadius: theme.borderRadius.large,
        gap: theme.spacing.xs,
        height: 60,
    },
    practiceButtonText: {
        fontSize: theme.fontSize.sm,
        color: theme.colors.primary.default,
        fontWeight: theme.fontWeight.semiBold,
    },
    startLearningButton: {
        flex: 2,
        borderRadius: theme.borderRadius.large,
        overflow: "hidden",
        height: 60,
        ...Platform.select({
            ios: {
                shadowColor: theme.colors.primary.light,
                shadowOffset: { width: 0, height: 3 },
                shadowOpacity: 0.3,
                shadowRadius: 5,
            },
            android: {
                elevation: 4,
            },
        }),
    },
    gradientButton: {
        paddingVertical: theme.spacing.md,
        alignItems: "center",
        justifyContent: "center",
        height: "100%",
    },
    startLearningButtonText: {
        fontSize: theme.fontSize.md,
        color: theme.colors.neutral.white,
        fontWeight: theme.fontWeight.semiBold,
    },
    markModeBanner: {
        backgroundColor: theme.colors.secondary.green.default,
        paddingVertical: theme.spacing.sm,
        paddingHorizontal: theme.spacing.lg,
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
    },
    markModeText: {
        color: theme.colors.neutral.white,
        fontSize: theme.fontSize.sm,
        fontWeight: theme.fontWeight.medium,
    },
    markModeActions: {
        flexDirection: "row",
        alignItems: "center",
    },
    markModeButton: {
        paddingHorizontal: theme.spacing.md,
        paddingVertical: theme.spacing.xs,
        marginRight: theme.spacing.md,
    },
    markModeButtonText: {
        color: theme.colors.neutral.white,
        fontSize: theme.fontSize.sm,
        fontWeight: theme.fontWeight.semiBold,
    },
    markModeButtonTextDisabled: {
        opacity: 0.5,
    },
    markModeCloseButton: {
        padding: theme.spacing.xs,
    },
    markButton: {
        position: "absolute",
        bottom: Platform.OS === "ios" ? 100 : 80,
        right: theme.spacing.lg,
        width: 56,
        height: 56,
        borderRadius: 28,
        zIndex: 95,
        ...Platform.select({
            ios: {
                shadowColor: theme.colors.secondary.green.default,
                shadowOffset: { width: 0, height: 4 },
                shadowOpacity: 0.3,
                shadowRadius: 8,
            },
            android: {
                elevation: 8,
            },
        }),
    },
    markButtonGradient: {
        width: "100%",
        height: "100%",
        borderRadius: 28,
        alignItems: "center",
        justifyContent: "center",
    },
    emptyContainer: {
        flex: 1,
        alignItems: "center",
        justifyContent: "center",
        paddingHorizontal: theme.spacing.xxl,
    },
    emptyImage: {
        width: 120,
        height: 120,
        marginBottom: theme.spacing.lg,
        opacity: 0.7,
    },
    emptyTitle: {
        fontSize: theme.fontSize.lg,
        fontWeight: theme.fontWeight.semiBold,
        color: theme.colors.neutral.black,
        marginTop: theme.spacing.md,
        textAlign: "center",
    },
    emptyText: {
        fontSize: theme.fontSize.md,
        color: theme.colors.neutral.gray,
        textAlign: "center",
        marginTop: theme.spacing.sm,
        marginBottom: theme.spacing.xl,
    },
    headerTitle: {
        fontSize: theme.fontSize.lg,
        fontWeight: theme.fontWeight.bold,
        color: theme.colors.neutral.black,
    },
    headerCenter: {
        flex: 1,
        alignItems: "center",
    },
    tabsContainer: {
        paddingHorizontal: theme.spacing.lg,
        paddingVertical: theme.spacing.sm,
        alignItems: "center",
    },
})

